﻿@page "/card/expand-card"
@inherits SampleBaseComponent;

@using Syncfusion.Blazor.Cards
@using Syncfusion.Blazor.Buttons

<SampleDescription>
    <p>This sample demonstrates Expansion of card.</p>
</SampleDescription>
<ActionDescription>
    <p>This card shows the weather details of a city.</p>
</ActionDescription>

<div class="control-section">
    <div class='row e-card-layout'>
        <div class="col-lg-4">
            <SfCard>
                <CardHeader Title="Hong Kong" SubTitle="Mon, 12.30 PM, Mostly Sunny" />
                <CardContent>
                    <table style="margin-bottom: 10px;">
                        <tr>
                            <td>
                                <div class="TempClass">23°C</div>
                            </td>
                            <td>
                                <div class="TempImage TextCenter"></div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <span class="RainImage"></span>
                                <span class="RainText">2% preciptation</span>
                            </td>
                        </tr>
                    </table>
                    @if (Expand)
                    {
                        <table>
                            <tr>
                                <td>
                                    <div class="WeekDay">Monday</div>
                                </td>
                                <td>
                                    <div class="CloudyImage TextCenter"></div>
                                </td>
                                <td>
                                    <div class="MinMaxClass TextCenter"><b>23°C</b> / 12°C</div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="WeekDay">Tuesday</div>
                                </td>
                                <td>
                                    <div class="SunnyImage TextCenter"></div>
                                </td>
                                <td>
                                    <div class="MinMaxClass TextCenter"><b>28°C</b> / 15°C</div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="WeekDay">Wednesday</div>
                                </td>
                                <td>
                                    <div class="SunnyImage TextCenter"></div>
                                </td>
                                <td>
                                    <div class="MinMaxClass TextCenter"><b>25°C</b> / 20°C</div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="WeekDay">Thursday</div>
                                </td>
                                <td>
                                    <div class="CloudyImage TextCenter"></div>
                                </td>
                                <td>
                                    <div class="MinMaxClass TextCenter"><b>20°C</b> / 12°C</div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="WeekDay">Friday</div>
                                </td>
                                <td>
                                    <div class="SunnyImage TextCenter"></div>
                                </td>
                                <td>
                                    <div class="MinMaxClass TextCenter"><b>23°C</b> / 15°C</div>
                                </td>
                            </tr>
                        </table>
                    }
                </CardContent>
                <CardContent EnableSeperator="true"></CardContent>
                <CardFooter>
                    <CardFooterContent>
                        <SfButton CssClass="e-outline" @onclick="@(() => Expand = !Expand)">@(Expand ? "Collapse" : "Expand")</SfButton>
                    </CardFooterContent>
                </CardFooter>
            </SfCard>
        </div>
    </div>
</div>

@code{
    bool Expand = false;
}

<style>
    .TempClass {
        font-size: 30px;
    }

    .TempImage {
        background-image: url(https://ej2.syncfusion.com/demos/src/chart/images/sunny.png);
        height: 40px;
        width: 40px;
    }

    .SunnyImage {
        height: 40px;
        width: 40px;
        background-image: url(https://ej2.syncfusion.com/demos/src/chart/images/sunny.png);
    }

    .CloudyImage {
        height: 40px;
        width: 40px;
        background-image: url(https://ej2.syncfusion.com/demos/src/chart/images/cloud.png);
    }

    .e-card .e-card-header .e-card-header-caption .e-card-header-title {
        font-size: 25px;
        line-height: 32px;
    }

    .e-card .e-card-header .e-card-header-caption .e-card-sub-title {
        font-size: 16px;
        line-height: 20px;
    }

    .e-card .e-card-content {
        padding-top: 0px;
    }

    .RainText {
        color: blue;
    }

    .RainImage {
        height: 20px;
        width: 20px;
        background-image: url(https://ej2.syncfusion.com/demos/src/chart/images/cloud.png);
    }

    .e-card-layout {
        display: flex;
        margin: auto;
        justify-content: center;
        align-items: center;
    }

    table {
        width: 100%;
    }

    .TextCenter {
        text-align: center;
    }
</style>